<template>
  <div id="app">

  <h2>{{message}}</h2>
    <!-- 共享属性 count  -->
    <h2>{{$store.state.count}}</h2>
    <h2>...mapState:{{count}}</h2>
    <h2>...mapState:{{info}}</h2>
<!--    <button @click="$store.state.count++">+</button>
    <button @click="$store.state.count&#45;&#45;">-</button>-->
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="increCount(10)">加法</button>
    <button @click="(10)">加法</button>
    <button @click="decrement(2)">vuex减法</button>
    <h2>---------------</h2>
    <h2>getters:{{$store.getters.pingfang}}</h2>
    <h2>vuex:{{pingfang}}</h2>
    <h2>---------------</h2>
    <h2>大于20岁的学生:{{$store.getters.filterStu}}</h2>
    <h2>---------------</h2>
    <h2>add一个学生</h2>
    <button @click="addStu">添加学生</button>
    <h2>info:{{$store.state.info}}</h2>

    <button @click="modifyInfo">修改个人信息</button>
    <h2>---------------</h2>
    <h2>---------------</h2>
    <button @click="updName">moduleA改名</button>
    <h2>moduleA里面的内容{{$store.state.a.name}}</h2>
    <h2>moduleA计算属性:{{$store.getters.fullname}}</h2>
    <h2>moduleA计算属性:{{$store.getters.addfullname}}</h2>
    <h2>moduleA计算属性:{{$store.getters.addfinalfullname}}</h2>

    <button @click="asycUpdateName">模块异步修改名字</button>
    <h2>---------下面是HelloVuex组件的内容--------</h2>
    <HelloVuex ></HelloVuex>
  </div>
</template>

<script>
  import HelloVuex from "./components/HelloVuex";
  import {mapState,mapActions,mapGetters,mapMutations} from 'vuex';
  export default {
    name: 'App',
    components:{
      HelloVuex
    },
    data(){
      return{
        message:"我是app组件的message",
        // count:0
      }
    },
    computed:{
      //数组写法  还有对象键值对写法，键名自定义，值为一个箭头函数(也可以直接写vuex中的方法名)
      ...mapState([
       'count',
       'info',
       "students"
      ]),
      ...mapGetters([
       "pingfang",
        "filterStu",
      ])
    },
    methods:{
      addition(){
        //提交的是   mutation   固定写法  绑定的type是在mutation里面写的东西
        this.$store.commit('add')
      },
      subtraction(){
        this.$store.commit('dec')
      },
      //封装方法 后面跟的参数官方名为:payload 符合负载
      increCount(counter){
        //普通的提交风格
       // this.$store.commit('increment',counter)
        //特殊提交:counter会成为payload(对象)的属性存在(与下面的写法不一样)
        this.$store.commit({type:'increment', counter})
      },
  /*    decCount(counter){
        this.$store.commit('decrement',counter)
      },*/

      addStu(){
        const stu = {id:114,name:"wf5",age:40}
        this.$store.commit('AddStu',stu)
      },
      //异步操作
      //组件 => (dispatch) => actions =>(commit) => mutations
      modifyInfo(){
        //异步操作时这里写法改变
        // this.$store.commit('modifyInf')
        // dispatch里面放的是actions里面的方法名
        // this.$store.dispatch('updateInfo',"xxxxx")
        // this.$store.dispatch('updateInfo',()=>{console.log("已经完成")})

        /*2:把payload变成一个对象传参
          this.$store.dispatch('updateInfo',{
           message:"我是xxx信息",
           success:()=>{
             console.log("已完成")
           }
         })*/
        //...mapActions
        this.$store.dispatch('updateInfo',"xxxxx")
            .then(value => {console.log(value)},reason => {console.log(reason)})

      },
      updName(){
        //虽然在模块里面,但是提交方式跟普通的一样
        this.$store.commit('updateName',"lisi")
        },
      asycUpdateName(){
        this.$store.dispatch('AupdateName')
      },
      ...mapMutations([
        "add","dec","decrement","increment"
      ])

    }
  }
</script>

<style>

</style>
